<template>
  <v-chart class="chart" :option="option" />
</template>

<script setup>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import VChart, { THEME_KEY } from 'vue-echarts';
import { ref, provide } from 'vue';

// 订单： 美国、加拿大、德国、英国、马来西亚、乌克兰、日本、印度尼西亚
// 采货： 泰国、美国、日本、马来西亚、香港、上海

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent]);

provide(THEME_KEY, 'light');

const option = ref({
  title: {
    text: '销售量',
    left: 'left'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)'
  },
  legend: {
    orient: 'horizontal',
    top: '10%',
    data: ['美国', '加拿大', '德国', '英国', '马来西亚', '乌克兰', '日本', '印度尼西亚']
  },
  series: [
    {
      name: '销售量',
      type: 'pie',
      radius: '55%',
      center: ['50%', '60%'],
      data: [
        { value: 335, name: '美国' },
        { value: 310, name: '加拿大' },
        { value: 234, name: '德国' },
        { value: 135, name: '英国' },
        { value: 154, name: '马来西亚' },
        { value: 154, name: '乌克兰' },
        { value: 154, name: '日本' },
        { value: 154, name: '印度尼西亚' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 2, 0.5)'
        }
      }
    }
  ]
});
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>
